<template>
  <div class="questions-container">
    <el-card>
      <div class="header">{{query.addDate ? '试题修改' : '试题录入'}}</div>
      <el-form
        style="padding: 20px"
        :model="query"
        :rules="rules"
        ref="query"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科:" prop="subjectID">
          <el-select v-model="query.subjectID"  @change="onChang" placeholder="请选择">
            <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="目录:" prop="catalogID">
          <el-select @focus="onFocusCatalog" v-model="query.catalogID" placeholder="请选择">
            <el-option v-for="item in catalogList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业:" prop="enterpriseID">
          <el-select @focus="FocusEnterprise" v-model="query.enterpriseID" placeholder="请选择">
            <el-option v-for="item in enterpriseList" :key="item.id" :label="item.company" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市:" prop="province">
          <el-select
            class="select"
            v-model="query.province"
            placeholder="请选择"
          >
            <el-option v-for="item in provincesList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select @focus="focusCity" class="select" v-model="query.city" placeholder="请选择">
            <el-option v-for="item in citysList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向:" prop="direction">
          <el-select @focus="FocusEnterprise" v-model="query.direction" placeholder="请选择">
            <el-option v-for="item in directionlist" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型:" prop="questionType">
          <el-radio v-model="query.questionType" label="1"
            >单选</el-radio
          >
          <el-radio v-model="query.questionType" label="2"
            >多选</el-radio
          >
          <el-radio v-model="query.questionType" label="3"
            >简答</el-radio
          >
        </el-form-item>
        <el-form-item label="难度:" prop="difficulty">
          <el-radio v-model="query.difficulty" label="1">简单</el-radio>
          <el-radio v-model="query.difficulty" label="2">一般</el-radio>
          <el-radio v-model="query.difficulty" label="3">困难</el-radio>
        </el-form-item>
        <el-form-item label="题干:" prop="question">
          <div class="quill-wrap">
            <quill-editor
              ref="myQuillEditor"
              v-model="query.question"
              :options="editorOption"
            />
          </div>
        </el-form-item>
        <el-form-item label="选项:"  v-if="query.questionType==='1'">
          <div class="display_flex" v-for="item in query.options" :key="item.Code">
            <el-radio  v-model.number="item.isRight" :label="1">
              {{item.code}}:<el-input  v-model="item.title" />
            </el-radio>
            <upload-image class="Images" @on-success='item.img=$event[0].url' :limit='1' />
          </div>
          <el-button type="danger" :disabled='query.questionType==="1"' icon="el-icon-plus" size="small">增加选项与答案</el-button>
        </el-form-item>
        <el-form-item label="选项:" v-if="query.questionType==='2'" >
          <div class="display_flex" v-for="item in query.options" :key="item.Code">
            <el-checkbox v-model="item.isRight">
              {{item.code}}:<el-input  v-model="item.title" />
            </el-checkbox>
            <upload-image class="Images" @on-success='item.img=$event[0].url' :limit='1' />
          </div>

          <el-button type="danger" icon="el-icon-plus" size="small" @click="onClickAdd">增加选项与答案</el-button>
        </el-form-item>
        <el-form-item v-else>
        </el-form-item>
        <el-form-item label="解析视频:">
          <el-input v-model="query.videoURL"/>
        </el-form-item>
        <el-form-item label="答案解析:" prop="answer">
          <div class="quill-wrap">
            <quill-editor
              ref="myQuillEditor"
              v-model="query.answer"
              :options="editorOption"
            />
          </div>
        </el-form-item>
        <el-form-item label="题目备注:">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="query.remarks">
          </el-input>
        </el-form-item>
        <el-form-item label="试题标签:">
          <el-select @focus="onFocus"  multiple v-model="query.tags" placeholder="请选择">
            <el-option v-for="item in tagsList" :key="item.value" :label="item.label" :value="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item >
          <el-button :type="query.addDate ? 'success' : 'primary'" @click="onSubmit">{{query.addDate ? '确认修改' : '确认提交'}}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
import { quillEditor } from 'vue-quill-editor'
import UploadImage from '@/components/UploadImage'
import rules from '@/utils/Validationrules'
import { simple } from '@/api/hmmm/subjects'
import { simple as directorysSimple } from '@/api/hmmm/directorys'
import { list } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import { add, detail, update } from '@/api/hmmm/questions'
import { direction } from '@/api/hmmm/constants'
hljs.configure({
  languages: ['javascript', 'python']
})
export default {
  name: 'questionsNew',
  components: {
    quillEditor,
    UploadImage
  },
  data () {
    return {
      query: {
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 企业
        enterpriseID: '',
        // 城市
        province: '',
        // 地区
        city: '',
        // 方向
        direction: '',
        // 题型
        questionType: '1',
        // 难度
        difficulty: '1',
        // 题干
        question: '',
        // 选项
        options: [
          {
            code: 'A',
            isRight: 0,
            title: '',
            img: ''
          },
          {
            code: 'B',
            isRight: 0,
            title: '',
            img: ''
          },
          {
            code: 'C',
            isRight: 0,
            title: '',
            img: ''
          },
          {
            code: 'D',
            isRight: 0,
            title: '',
            img: ''
          }
        ],
        // 解析视频
        videoURL: '',
        // 答案解析
        answer: '',
        // 题目备注
        remarks: '',
        // 试题标签
        tags: []
      },
      rules,
      // 富文本
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['blockquote', 'code-block'], // 引用  代码块
            ['image', 'link'] // 链接、图片
          ],
          syntax: {
            highlight: text => {
              return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方
            }
          }
        }
      },
      // 学科列表
      subjectList: [],
      // 目录列表数据
      catalogList: [],
      // 企业数据列表
      enterpriseList: [],
      // 省份数据
      provincesList: provinces(),
      // 城市数据
      citysList: [],
      // 标签
      tagsList: [],
      // 方向
      directionlist: direction,
      // 修改id
      editID: this.$route.query.id
    }
  },
  created () {
    this.getSimple()
    this.queryEdit()
  },
  methods: {
    // 发送请求
    async onSubmit () {
      await this.$refs.query.validate()
      try {
        if (this.query.addDate) {
          await update({ ...this.query, tags: this.query.tags.join(',') })
          this.$message.success('修改成功')
        } else {
          await add({ ...this.query, tags: this.query.tags.join(',') })
          this.$message.success('添加成功')
        }
        this.$router.push('list')
      } catch (error) {

      }
    },
    // 获取学科简单列表
    async getSimple () {
      const { data } = await simple()
      this.subjectList = data
    },
    // 获取目录数据
    async onFocusCatalog () {
      if (this.query.subjectID) {
        const { data } = await directorysSimple({ subjectID: this.query.subjectID })
        this.catalogList = data
      }
    },
    // 获取企业数据
    async FocusEnterprise () {
      const { data } = await list({ pagesize: 1000 })
      this.enterpriseList = data.items
    },
    // 获取地区
    focusCity () {
      if (this.query.province) {
        this.citysList = citys(this.query.province)
      }
    },
    // 获取标签
    async onFocus () {
      if (this.query.subjectID) {
        const { data } = await tagsSimple({ subjectID: this.query.subjectID })
        this.tagsList = data
      }
    },
    // 增加选项
    onClickAdd () {
      this.query.options.push({
        code: String.fromCharCode(65 + this.query.options.length),
        isRight: 0,
        title: '',
        img: ''
      })
    },
    // 切换清空
    onChang () {
      if (this.query.subjectID) {
        this.query.catalogID = ''
        this.query.tags = ''
      }
    },
    async queryEdit () {
      if (this.editID) {
        const { data } = await detail({ id: this.editID })
        this.query = { ...data, tags: data.tags.split(',') }
      }
    },
    onSuccesss (obj) {
      console.log(obj[0])
    }
  }
}
</script>

<style scoped lang="scss">
.questions-container {
  margin: 15px;
}
.header {
  padding: 18px 20px;
  border-bottom: 1px solid #ccc;
}
::v-deep .el-input__inner {
  width: 400px;
}
::v-deep .select .el-input__inner {
  width: 200px;
}
::v-deep .ql-container {
  height: 200px;
}
::v-deep .Images{
  width: 100px;
  height: 60px;
}
.display_flex{
  display: flex;
  align-items: center;
}
::v-deep .Images{
  text-align: center;
 .el-upload,.el-upload--picture-card{
  width: 100px;
  height: 60px;

  }
  .el-icon-plus,.avatar-uploader-icon{
    width: 100px;
    height: 60px;
    line-height: 60px;
    position:relative;
    top: -40px;
  }
  .el-upload-list--picture-card .el-upload-list__item{
    width: 100px;
    height: 60px;
  }
  .el-upload .el-upload--picture-card{
    display: none;
  }
  .el-progress-circle{
    width: 50px !important;
    height: 30px !important;
  }
  .el-progress--circle .el-progress__text, .el-progress--dashboard .el-progress__text{
    top: 80%;
  }
}

</style>
